/* eslint-disable */
import echarts from "echarts/lib/echarts";
import Chart from "echarts-for-react/lib/core";


    export default function LeftCenter1({ xData = [], yLabel = '', data = [], title = '' }) {
        // let hazardous = this.props.hazardous
        var ColorArr = [[(100 - 50)/100, '#00FAFF'], [1, 'rgba(20, 29, 41, 0.8)']]
      
        const option = {
          
                //  backgroundColor:'#333333',
                tooltip : {
                    trigger: 'axis'
                },
                series: [
                    //第一个图表
                    {
                    name: "仪盘表",
                    type: "gauge",
                    splitNumber: 20,
                    radius: '75%',
                    startAngle: 90,
                    endAngle: -269,
                    clockwise: true,
                    axisLine: {
                        "lineStyle": {
                            "color": [
                                ...ColorArr
                            ],
    
                            width: 6,
                            opacity: 1,
                        },
                        show: true,
                        length: 10
                    },
                    axisTick: {
                        lineStyle: {
                            // color:'rgb(51, 51, 51)',
                            color: '#0D202E',
                            width: 4,
                            opacity: 1
                        },
                        length: 10,
                        splitNumber: 1,
    
                    },
                    pointer: {           // 分隔线
                        shadowColor: '#fff', //默认透明
                        shadowBlur: 10,
                        show: false
                    },
                    axisLabel: {
                        // distance: 10,
                        // textStyle: {
                        //     color: "#fff"
                        // },
                        show: false,
                    },
                    splitLine: {
                        "show": false
                    },
                  
                    // itemStyle: {
                    //     normal: {
                    //         color: "#494f50"
                    //     }
                    // },
                    detail: {
                        formatter: "{value}",
                        offsetCenter: [0, "0%"],
                        textStyle: {
                            fontSize: 20,
                            color: "#fff"
                        }
                    },
                    title: {
                        offsetCenter: [0, "50%"]
                    },
                    data: [{
    
                        value: 2569.4
                    }]
                },
                {
                    name: '外圈圆',
                    type: 'gauge',
                    startAngle: 180,
                    endAngle: -179.9,
                    radius: '90%',
                    splitNumber: 35,
                    center: ['50%', '50%'],
                    axisLabel: {
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            width: 3,
                            color: [[0, '#00FAFF'], [1, '#00FAFF']]
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    pointer: {
                        show: false
                    },
                    detail: {
                        show: false
                    },
                    // data: [{value: 50, name: '00'}]
                },
               
                //第二个图表
               
                ]
          
        }
        return (
            <div className="situational-detail">
              <Chart
                echarts={echarts}
                option={option}
                notMerge
                lazyUpdate
                style={{ height: 110,width:110 }}
              />
            </div>
          );
    }



